import React, { useEffect, useRef } from "react";
import * as echarts from 'echarts';
import styels from "./echart.module.scss";

const EchartModelGaugeProgress = ({
    title = "模块",
    color = "#7cffb2",
    state = 0,
    maxTarget = 100
}) => {


    const ref = useRef();

    const setEchart = (state) => {

        var myChart = echarts.init(ref.current, 'dark');
        var option;
        myChart.clear();

        option = {
            backgroundColor: '', //设置无背景色
            title: [
                // {
                //     text:`合计：799\n目标：1200`,
                //     // text: '{val|' + state + '}{name|' + '人' + '}',
                //     bottom: '40%',
                //     left: 'center',
                //     zlevel: 100,
                //     textStyle: {
                //         fontSize:14,
                //         rich: {
                //             val: {
                //                 fontSize: 12,
                //                 color: '#E5E5E5',
                //                 fontFamily: 'DIN-Bold',
                //                 padding: [2, 0],
                //             },
                //             name: {
                //                 fontSize: 12,
                //                 color: '#fff',
                //             },
                //         },
                //     },
                //     triggerEvent: true,
                // },
                {
                    text: '{name|' + title + '}',
                    bottom: '0%',
                    left: 'center',
                    zlevel: 100,
                    textStyle: {
                        rich: {
                            val: {
                                fontSize: 12,
                                color: '#E5E5E5',
                                fontFamily: 'HYYakuHei',
                                padding: [5, 0]
                            },
                            name: {
                                fontSize: 14,
                                color: '#fff',
                            },
                        },
                    },
                    triggerEvent: true,
                },
            ],
            series: [
                {
                    color: color,
                    radius: '100%',
                    type: 'gauge',
                    splitNumber: 5, // 刻度数量
                    min: 0, // 最小刻度
                    max: maxTarget,
                    // progress: {
                    //     show: true,
                    //     width: 8
                    // },
                    // 仪表盘轴线相关配置
                    axisLine: {
                        lineStyle: {
                            color: [
                                [
                                    5,
                                    {
                                        type: 'radial',
                                        x: 0.5,
                                        y: 0.6,
                                        r: 0.6,
                                        colorStops: [
                                            {
                                                offset: 0.85,
                                                color: 'rgba(50, 226, 247, 0)', // 0% 处的颜色
                                            },
                                            {
                                                offset: 0.90,
                                                color: 'rgba(24, 124, 165, 0.1)', // 100% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(24, 124, 165, 1.00)', // 100% 处的颜色
                                            },
                                        ],
                                    },
                                ],
                            ],
                            width: 300,
                        },
                    },
                    /** 刻度线*/
                    axisTick: {
                        show: true,
                        splitNumber: 2,
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)', // 用颜色渐变函数不起作用
                            width: 1,
                        },
                        length: 5,
                    },
                    /** 分隔线样式*/
                    splitLine: {
                        show: true,
                        length: 9,
                        lineStyle: {
                            width: 1,
                            color: '#fff', // 用颜色渐变函数不起作用
                        },
                    },
                    /** 刻度标签*/
                    axisLabel: {
                        distance: 2,
                        color: 'rgba(255, 255, 255, 1)',
                        fontSize: 12,
                        fontFamily: 'DIN-Bold',
                        format: (event) => {
                            console.log("刻度：", event);
                        }
                    },
                    anchor: {
                        show: true,
                        showAbove: true,
                        size: 12,
                        itemStyle: {
                            borderWidth: 2
                        }
                    },

                    detail: {
                        show: false,
                    },
                    animationDuration: 1500,//动画时长
                    // data: [
                    //     {
                    //         value: state
                    //     }
                    // ]
                },
                // 中间层
                {
                    name: '第二次弧形向外渐变',
                    type: 'gauge',
                    radius: '50%',
                    splitNumber: 0, // 刻度数量
                    min: 0, // 最小刻度
                    max: maxTarget,
                    // 仪表盘轴线相关配置
                    axisLine: {
                        lineStyle: {
                            color: [
                                [
                                    3,
                                    {
                                        type: 'radial',
                                        x: 0.5,
                                        y: 0.6,
                                        r: 0.6,
                                        colorStops: [
                                            {
                                                offset: 0.84,
                                                color: 'rgba(50, 226, 247, 0)', // 0% 处的颜色
                                            }, {
                                                offset: 0.85,
                                                color: 'rgba(29, 129, 172, 1.00)', // 0% 处的颜色
                                            },
                                            {
                                                offset: 0.99,
                                                color: 'rgba(24, 124, 165, 0.1)', // 100% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(50, 226, 247, 0)', // 100% 处的颜色
                                            },
                                        ],
                                    },
                                ],
                            ],
                            width: 300,
                        },
                    },
                    /** 分隔线样式*/
                    splitLine: {
                        show: false,
                        length: 9,
                        lineStyle: {
                            width: 1,
                            color: '#fff', // 用颜色渐变函数不起作用
                        },
                    },
                    /** 刻度线*/
                    axisTick: {
                        show: false,
                        splitNumber: 2,
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)', // 用颜色渐变函数不起作用
                            width: 1,
                        },
                        length: 5,
                    },
                    /** 刻度标签*/
                    axisLabel: {
                        distance: 2,
                        show: false,
                        color: 'rgba(255, 255, 255, 1)',
                        fontSize: 12,
                        fontFamily: 'DIN-Bold'
                    },
                    detail: {
                        show: false,
                    },
                    animationDuration: 4000,
                },
                // // 内圆
                // {
                //     type: 'pie',
                //     radius: ['0', '38%'],
                //     center: ['50%', '50%'],
                //     hoverAnimation: false,
                //     z: 3,
                //     data: [
                //         {
                //             value: 100,
                //             itemStyle: {
                //                 normal: {
                //                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                //                         {
                //                             offset: 0,
                //                             color: 'rgba(11, 46, 123, 1.00)',
                //                         },
                //                         {
                //                             offset: 1,
                //                             color: 'rgba(6, 97, 191, 1.00)',
                //                         },
                //                     ]),
                //                     opacity: 1,
                //                 },
                //             },
                //             label: {
                //                 show: false,
                //             },
                //         },
                //     ],
                //     labelLine: {
                //         show: false,
                //     },
                // },
                // 遮蔽指针
                // {
                //     type: 'pie',
                //     radius: ['0', '30%'],
                //     center: ['50%', '50%'],
                //     hoverAnimation: false,
                //     zlevel: 8,
                //     data: [
                //         {
                //             value: 100,
                //             itemStyle: {
                //                 normal: {
                //                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                //                         {
                //                             offset: 0,
                //                             color: 'rgba(11, 46, 123, 1.00)',
                //                         },
                //                         {
                //                             offset: 1,
                //                             color: 'rgba(6, 97, 191, 1.00)',
                //                         },
                //                     ]),
                //                     opacity: 1,
                //                 },
                //             },
                //             label: {
                //                 show: false,
                //             },
                //         },
                //     ],
                //     labelLine: {
                //         show: false,
                //     },
                // },
                // 指针
                {
                    name: "指针",
                    type: "gauge",
                    zlevel: 5,
                    radius: "70%",
                    startAngle: 225,
                    endAngle: -45,
                    center: ["50%", "50%"], //整体的位置设置
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    min: 0,
                    max: maxTarget,
                    pointer: {
                        show: true,
                        width: 3,
                        length: "80%",
                        offsetCenter: [0, 0],
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgb(0,235,255)'
                        }
                    },
                    detail: {
                        show: false,

                    },
                    data: [state]
                },
                {
                    name: '渐变进度',
                    type: 'gauge',
                    radius: '100%',
                    splitNumber: 0,
                    startAngle: 225,
                    endAngle: -45,
                    zlevel: 9,
                    axisLine: {
                        lineStyle: {
                            color: [
                                [
                                    state / maxTarget,
                                    {
                                        type: 'linear',
                                        x: 0,
                                        y: 1,
                                        x2: 0,
                                        y2: 0,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: 'rgba(60,207,223,0)', // 0% 处的颜色
                                            },
                                            {
                                                offset: 0.9,
                                                color: 'rgba(50, 226, 247, 0.8)', // 100% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(50, 226, 247, 1)', // 100% 处的颜色
                                            },
                                        ],
                                    },
                                ],
                            ],
                            width: 38,
                        },
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                    itemStyle: {
                        show: false,
                    },
                    detail: {
                        show: false,
                    },
                    title: {
                        // 标题
                        show: false,
                    },
                    data: [],
                    pointer: {
                        show: false,
                    },
                    animationDuration: 4000,
                },
            ]
        };

        option && myChart.setOption(option);


    }




    useEffect(() => {
        setTimeout(() => {
            setEchart(state)
        }, 500)
    }, [ref,state])
    return (
        <>
            <div className={styels.box}>
                <div className="echart" ref={ref}></div>
            </div>
        </>
    )
}
export default EchartModelGaugeProgress;